<!-- setup()写法 -->
<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useRoute } from 'vue-router';
import { House, Histogram } from '@element-plus/icons-vue';

interface MenuItem {
    path: string;
    icon?: any;
    title: string;
    children?: MenuItem[];
}

export default defineComponent({
    name: 'NavTrends',
    props: {
        menuList: {
            type: Array as () => MenuItem[],
            default: () => [
                {
                    path: '/',
                    icon: House,
                    title: '首页'
                },
                {
                    path: '/Demo',
                    icon: Histogram,
                    title: 'Vue用法',
                    children: [
                        { path: '/Demo1', title: '1.数据渲染' },
                        { path: '/Demo2', title: '2.生命周期' }
                    ]
                }
            ]
        }
    },
    setup(props) {
        const route = useRoute();
        const activePath = computed(() => route.path);

        const handleSelect = (key: string, keyPath: string[]) => {
            // console.log(key, keyPath)
        };

        return {
            activePath,
            handleSelect
        };
    }
});
</script>

<template>
    <div>
        <el-menu
            :default-active="activePath"
            :router="true"
            :ellipsis="false"
            mode="horizontal"
            background-color="#42b883"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect"
        >
            <template v-for="menuItem in menuList" :key="menuItem.path">
                <el-menu-item v-if="!menuItem.children?.length" :index="menuItem.path" :route="menuItem.path">
                    <template #title>
                        {{ menuItem.title }}
                    </template>
                </el-menu-item>

                <el-sub-menu popper-class="nav-trends" v-else :index="menuItem.path">
                    <template #title>
                        {{ menuItem.title }}
                    </template>
                    <NavTrends :menuList="menuItem.children" />
                </el-sub-menu>
            </template>
        </el-menu>
    </div>
</template>

<style scoped>
.nav-trends .el-menu {
    display: block !important;
}
.nav-trends .el-menu .el-menu-item {
    justify-content: left !important;
}
</style>
